
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>订单评价</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- <link rel="shortcut icon" href="/favicon.ico"> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="<%=basePath %>/resources/Public/Vendor/SUI/dist/css/sm.min.css">
    <link rel="stylesheet" href="<%=basePath %>/resources/Public/Vendor/SUI/dist/css/sm-extend.min.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath %>/resources/Public/Vendor/icon/iconfont.css">


    <link rel="stylesheet" href="<%=basePath %>/resources/Public/css/common.css">
    <style type="text/css">

        #function-demo img {cursor: pointer;}
    </style>

</head>
<body>
<div class="page-group" style="position: fixed;">
    <div class="page xgj-order-assess-4star" id='xgj-order-assess-4star'>
        <div class="content ">
            <div class="list-block">
            </div>
            <div class="list-block" id="my-star" >

                <div class="" style="text-align: center">
                    <div id="function-demo" class="target-demo" style="cursor: pointer;"></div>
                    <div id="function-hint" class="hint" style="text-align: center"></div>
                    <input type="hidden" name="my-star-num" id='my-star-num' value="">
                    <input type="hidden" name="orderNo" id='orderNo' value="${orderNo}">
                </div>
                <div class=" tag " >
                    <div class="row good" style="display: none;padding: 0 .75rem;">
                        <%--<div class="col-33"><a href="#" class="button button-round button-gray">态度好服务棒</a></div>
                        <div class="col-33"><a href="#" class="button button-round button-gray">上门速度快</a></div>
                        <div class="col-33"><a href="#" class="button button-round button-gray">专业技术好</a></div>--%>
                        <c:forEach items="${good}" var="g">
                            <div class="col-33"><a href="#" data-value="${g.id}" class="button button-round button-gray">${g.name}</a></div>
                        </c:forEach>
                    </div>
                    <div class="row nogood" style="display: none;padding: 0 .75rem;">
                        <%--<div class="col-33"><a href="#" class="button button-round button-gray">服务态度恶劣</a></div>
                        <div class="col-33"><a href="#" class="button button-round  button-gray">随意翻弄物品</a></div>
                        <div class="col-33"><a href="#" class="button button-round button-gray">技术不专业</a></div>--%>
                        <c:forEach items="${bad}" var="b">
                            <div class="col-33"><a href="#" data-value="${b.id}" class="button button-round button-gray">${b.name}</a></div>
                        </c:forEach>
                    </div>
                    <input type="hidden" name="my-selected-lable" id='my-selected-lable' value="">
                </div>
            </div>
            <div class="list-block">
                <ul>
                    <li class="item-content">
                        <textarea id="assess-msg" placeholder="其他想说的(您的评价将匿名延迟告知师傅，请放心评价)"></textarea>
                    </li>
                    <li class="item-content" style="margin-top: .2rem;">
                        <div class="item-pijia-img">
                            <img class="" style="width: 3rem;height: 3rem;" src="<%=basePath %>/resources/Public/images/demo/avatar.jpg">
                            <span class="icon iconfont icon-tupiantianjia" id='add-pijia-img'></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <nav class="bar bar-tab xgj-bar-btn">
            <p><a href="javascript:submit()" class="">匿名提交</a></p>
        </nav>
        <script src='<%=basePath %>/resources/Public/Vendor/SUI/dist/js/zepto.js'></script>
        <script type="text/javascript">
            $.config = {
                // 路由功能开关过滤器，返回 false 表示当前点击链接不使用路由
                //
                routerFilter: function($link) {
                    // 某个区域的 a 链接不想使用路由功能
                    if ($link.is('.disable-router a')) {
                        return false;
                    }
                    return true;
                }
            };
        </script>
        <script src='<%=basePath %>/resources/Public/Vendor/SUI/dist/js/sm.js'></script>
        <script type="text/javascript" src="<%=basePath %>/resources/g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>
        <script src='<%=basePath %>/resources/Public/Vendor/SUI/dist/js/sm-extend.min.js'></script>
        <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

        <script src='<%=basePath %>/resources/Public/js/common.js'></script>
        <script type="text/javascript" src="<%=basePath %>/resources/Public/Vendor/jstar/lib/jquery.min.js"></script>
        <script type="text/javascript" src="<%=basePath %>/resources/Public/Vendor/jstar/lib/jquery.raty.js"></script>
        <script type="application/javascript" src="<%=basePath %>/resources/Public/Vendor/SUI/js/fastclick.js"></script>

    </div>
</div>
<!--   此处引入 tabar.php -->
<!-- / 此处引入 tabar.php -->
<script type="text/javascript">
    var lables = new Array();
    $(function() {
        FastClick.attach(document.body);
        $('#function-demo').raty({
            number: 5,//多少个星星设置
            score: 0,//初始值是设置
            targetType: 'hint',//类型选择，number是数字值，hint，是设置的数组值
            path      : '<%=basePath %>/resources/Public/Vendor/jstar/demo/img',
            targetText: '请选择评分',
            hints     : ['非常不满意，各方面都很差','不满意，比较差','一般，还需改善','比较满意，仍可改善','非常满意，无可挑剔'],
            size      : 36,
            starHalf  : 'star-half-big.png',
            starOff   : 'star-off-big.png',
            starOn    : 'star-on-big.png',
            target    : '#function-hint',
            cancel    : false,
            targetKeep: true,

            click: function(score, evt) {
                $("#my-star-num").val(score);
                $(".tag .button").addClass('button-gray');
                if (score == 5) {
                    $(".good").show();
                    $(".nogood").hide();
                }else{
                    $(".nogood").show();
                    $(".good").hide();
                }

            }
        });

        $(".hint").text('请选择评分');
        $(".tag .button").on("click",function () {
            if($(this).hasClass('button-gray')){
                $(this).removeClass('button-gray');
                lables.push($(this).attr("data-value"));
            }else{
                $(this).addClass('button-gray');
                var lab = $(this).attr("data-value");
                lables.splice($.inArray(lab,lables),1);
            }

        })

    });

function submit() {
    var lable = lables.join(",");
    $.ajax({
        url: "<%=basePath%>wx/order/assess.do",
        method: 'POST',
        dataType: 'json',
        data: {
            orderNo:$("#orderNo").val(),
            stars:$("#my-star-num").val(),
            lableIds:lable,
            message:$("#assess-msg").val()
        },
        success: function(data){
            if(data.code==200){
                var openId = data.data;
                $.toast("评价成功！");
                //setTimeout(toListAddress, 2000);
                setTimeout(2000);
                window.location.href="<%=basePath %>/wx/order/qOrders.do?openId=" + openId;
            }else{
                $.toast("评价失败！");
            }

        }
    });
}

</script>


</body>
</html>